//hooks
import { useIntersectionObserver } from "@vueuse/core";

import { ref, onMounted, Ref } from "vue";
import type { tabDataItemType } from "@/views/practice/model/type";

//数据懒加载hooks
const useLazyData = (apiFn: any, data:tabDataItemType[]) => {
  //请求数据方法
  const result = ref([]);
  const target = ref(null);

  const { stop } = useIntersectionObserver(
    target,
    async ([{ isIntersecting }],  observeElement) => {
      
      if (isIntersecting) {
        try {
          const res = await apiFn();
          data[0].content = res.content;
          stop();
        } catch (e) {
          console.log("初始化获取数据失败");
        }
      }
    },
    {
      threshold: 0,
    }
  );

  return {
    data,
    target
  }
};

export default useLazyData;
